<template>
  <div>
    <el-button type="primary" @click="handleShowAddChapterDialog">添加章节</el-button>
    <!-- 章节列表 -->
    <ul class="chapterList">
      <li
        v-for="chapter in chapters"
        :key="chapter.id">
        <p>
          {{ chapter.title }}
          <span class="acts">
            <el-button type="text" @click="handleShowAddVideoDialog(chapter)">添加课时</el-button>
            <el-button type="text" @click="handleShowEditChapterDialog(chapter)">编辑</el-button>
            <el-button type="text" @click="hanldeDelChapter(chapter)">删除</el-button>
          </span>
        </p>
        <!-- 视频 -->
        <ul class="chapterList videoList">
          <li
            v-for="video in chapter.videos"
            :key="video.id">
            <p>
              {{ video.title }}
              <el-tag v-if="!video.videoSourceId" size="mini" type="danger">
                {{ '尚未上传视频' }}
              </el-tag>
              <span class="acts">
                <el-tag v-if="video.free" size="mini" type="success">{{ '免费观看' }}</el-tag>
                <el-button type="text">编辑</el-button>
                <el-button type="text">删除</el-button>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <!-- 章 对话框 -->
    <chapter-form ref="chapterDialog" />
    <!-- 课时对话框 -->
    <video-form ref="videoDialog"/>
    <div style="margin-top:50px;text-align:center">
      <el-button :disabled="disabled" type="primary" @click="prev" >上一步</el-button>
      <el-button :disabled="disabled" type="primary" @click="next" >下一步</el-button>
    </div>
  </div>
</template>
<script>
import chapterForm from '@/views/course/components/step2/chapterForm'
import videoForm from '@/views/course/components/step2/videoForm'

export default {
  components: {
    chapterForm, videoForm
  },
  data() {
    return {
      dialogVisible: false,
      chapters: [],
      disabled: false
    }
  },
  methods: {
    handleShowAddChapterDialog() {

    },
    handleShowAddVideoDialog(chapter) {

    },
    handleShowEditChapterDialog(chapter) {

    },
    hanldeDelChapter(chapter) {

    },
    prev() {
      this.$parent.active = 0
    },
    next() {
      this.$parent.active = 2
    }
  }
}
</script>

<style>

</style>
